<template>
    <div class="singer" ref="singer">
        <m-header title="歌手"></m-header>
        <list-view
            @select="selectSinger"
            :data="singers"
            ref="list"
        ></list-view>
        <router-view></router-view>
    </div>
</template>

<script type="text/ecmascript-6">
    import MHeader from 'components/m-header/m-header'
    import { getSingerList } from 'api/singer'
    import { ERR_OK } from 'api/config'
    import Singer from 'common/js/classes/singer'
    import ListView from 'base/list-view/list-view'
    import PlayListMixin from 'common/mixins/play-list'
    import { getStyle } from 'common/js/dom'
    import { MINI_PLAYER_HEIGHT, TAB_HEIGHT } from 'common/js/config'
    import { mapMutations } from 'vuex'

    const HOT_NAME = '热门'
    const OTHER_NAME = '#'
    const HOT_SINGER_LEN = 10

    export default {
        mixins: [PlayListMixin],
        data() {
            return {
                singers: []
            }
        },
        created() {
            this._getSingerList()
        },
        methods: {
            selectSinger(item) {
                this.$router.push({
                    path: `/singer/${item.id}`
                })
                // vuex mutations提交
                this.setSinger(item)
            },
            _getSingerList() {
                getSingerList().then((res) => {
                    if (res.code === ERR_OK) {
                        let unOrderList = this._normalizeSinger(res.data.list)
                        this.singers = this._ascSort(unOrderList)
                    }
                })
            },
            // 用接收到的后端数据，生成新的数据结构
            // 即：{hot：{title：name，item：[]}, a:{title：name，item：[]}}
            _normalizeSinger(list) {
                let map = {
                    hot: {
                        title: HOT_NAME,
                        items: []
                    },
                    other: {
                        title: OTHER_NAME,
                        items: []
                    }
                }
                // 遍历list，以生成拥有所需数据结构的新的数组
                list.forEach((item, index) => {
                    // 填充歌手列表 热门分类
                    if (index < HOT_SINGER_LEN) {
                        map.hot.items.push(new Singer({
                            id: item.Fsinger_mid,
                            name: item.Fsinger_name
                        }))
                    }
                    let key = item.Findex
                    if (!map[key]) {
                        map[key] = {
                            title: key,
                            items: []
                        }
                    } else if (!key.match(/[a-zA-Z]/)) {
                        // 将A-Z以外的歌手添加到其他分类
                        key = 'other'
                    }
                    map[key].items.push(new Singer({
                        id: item.Fsinger_mid,
                        name: item.Fsinger_name
                    }))
                })
                return map
            },
            _ascSort(list) {
                // 将列表排序
                // 将初始数组拆分成三个数组
                let hot = []
                let ret = []
                let other = []
                for (let key in list) {
                    let val = list[key]
                    if (val.title.match(/[a-zA-Z]/)) {
                        ret.push(val)
                    } else if (val.title === HOT_NAME) {
                        hot.push(val)
                    } else if (val.title === OTHER_NAME) {
                        other.push(val)
                    }
                }
                // 将ret 进行 热门-A-Z 排序
                ret.sort((a, b) => {
                    return a.title.charCodeAt(0) - b.title.charCodeAt(0)
                })
                // 合并数组
                return hot.concat(ret, other)
            },
            // 重设滚动部分底部距离
            handlePlayList(playList) {
                const bottom = playList.length > 0 ? `${MINI_PLAYER_HEIGHT + TAB_HEIGHT}px` : ''
                const el = this.$refs.singer
                getStyle(el, 'bottom', bottom)
                this.$refs.list.refresh()
            },
            // vux写入数据的语法糖
            ...mapMutations({
                setSinger: 'SET_SINGER'
            })
        },
        components: {
            ListView,
            MHeader
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable"

    .singer
        position: fixed
        top: 0
        bottom: $height-tab
        width: 100%
</style>
